<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术社区</title>
    <link rel="stylesheet" href="./static/element-plus/index.css">
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .el-carousel__container img {
            width: 100%;
            height: 100%;
        }
        .hidden-xs-only { display: block; }
        @media (max-width: 768px) {
            .hidden-xs-only { display: none; }
        }
        .user-panel {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="display: flex; align-items: center">
                        <img src="./static/images/logo.png" style="height: 60px">
                        <h2 style="padding-left: 6px">技术社区</h2>
                    </el-col>
                    <el-col :span="8">
                        <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8" style="height: 60px; line-height: 60px" class="hidden-xs-only">
                        <el-input placeholder="请输入搜索内容" />
                    </el-col>
                   <!-- 修改导航栏部分 -->
<el-col :span="4" style="height: 60px; display: flex; align-items: center; justify-content: flex-end">
    <div class="user-panel" style="height: 100%; display: flex; align-items: center">
      <template v-if="!isLoggedIn">
        <el-link type="primary" href="login.html" style="display: flex; align-items: center">登录</el-link>
        <el-link type="primary" style="padding-left: 10px; display: flex; align-items: center" href="reg.html">注册</el-link>
      </template>
      <template v-else>
        <el-dropdown>
          <div class="user-info" style="display: flex; align-items: center; height: 100%">
            <img :src="avatarUrl" class="avatar-img" style="vertical-align: middle">
            <span style="margin-left: 5px; line-height: 1">{{ userName }}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToPersonal">个人中心</el-dropdown-item>
              <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </div>
  </el-col>
                </el-row>
            </el-header>
              <el-main>
                <el-carousel height="420px">
                    <el-carousel-item>
                      <img src="./static/images/carousel1.png" alt="轮播图1">
                    </el-carousel-item>
                    <el-carousel-item>
                      <img src="./static/images/carousel2.png" alt="轮播图2">
                    </el-carousel-item>
                    <el-carousel-item>
                      <img src="./static/images/carousel3.png" alt="轮播图3">
                    </el-carousel-item>
                  </el-carousel>

                <el-row :gutter="20" style="margin-top: 20px">
                    <el-col :span="8">
                        <el-card>
                            <h3>热门文章</h3>
                            <el-list>
                                <el-list-item v-for="article in articles" :key="article.id">
                                    <el-link :href="article.url">{{ article.title }}</el-link>
                                </el-list-item>
                            </el-list>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <h3>热门课程</h3>
                            <el-list>
                                <el-list-item v-for="course in courses" :key="course.id">
                                    <el-link :href="course.url">{{ course.title }}</el-link>
                                </el-list-item>
                            </el-list>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <h3>热门商品</h3>
                            <el-carousel :interval="4000" type="card" height="200px">
                                <el-carousel-item v-for="product in products" :key="product.id">
                                    <el-link :href="product.url">
                                        <el-image 
                                            :src="'./static/images/' + product.image" 
                                            fit="contain"
                                            style="height: 160px"
                                        ></el-image>
                                        <div style="text-align: center; margin-top: 10px">{{ product.title }}</div>
                                    </el-link>
                                </el-carousel-item>
                            </el-carousel>
                        </el-card>
                    </el-col>
                </el-row>
            </el-main>

            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8" style="display: flex; align-items: center">
                        <img src="./static/images/logo.png" style="height: 100px">
                        <div style="margin-left: 10px">
                            <h2>技术社区</h2>
                            <p>致力构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="10" style="padding-top: 30px">
                        <div style="display: flex; justify-content: space-around">
                            <el-link type="primary">首页</el-link>
                            <el-link type="primary">咨询</el-link>
                            <el-link type="primary">课程</el-link>
                            <el-link type="primary">商城</el-link>
                        </div>
                        <div style="display: flex; justify-content: space-around; margin-top: 20px">
                            <el-link type="primary">关于我们</el-link>
                            <el-link type="primary">使用手册</el-link>
                            <el-link type="primary">隐私条款</el-link>
                            <el-link type="primary">建议反馈</el-link>
                        </div>
                    </el-col>
                    <el-col :xs="24" :lg="6">
                        <h2>联系我们</h2>
                        <p>电话：123456789</p>
                        <p>邮箱：software@develop.com</p>
                    </el-col>
                    <el-col :span="24" style="background-color: deepskyblue; text-align: center; padding: 10px">
                        <p>软件开发工作室版权所有</p>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>

    <script>
        const App = {
            data() {
                return {
                    activeIndex: "1",
                    isLoggedIn: localStorage.getItem('isLoggedIn') === 'true',
                    userName: localStorage.getItem('username') || '用户',
                    avatarUrl: './static/images/avatar.png',
                   articles: [
                        { id: 1, title: "vue3.0新特性使用攻略", url: "article1.html" },
                        { id: 2, title: "vue脚手架使用详解", url: "article2.html" },
                        { id: 3, title: "Element Plus组件库使用指南", url: "article3.html" }
                    ],
                    courses: [
                        { id: 1, title: "零基础学JavaScript", url: "course1.html" },
                        { id: 2, title: "Vue3.0从入门到精通", url: "course2.html" },
                        { id: 3, title: "Element Plus组件库实战", url: "course3.html" }
                    ],
                    products: [
                        { id: 1, title: "商品1", url: "product1.html", image: "product01.png" },
                        { id: 2, title: "商品2", url: "product2.html", image: "product02.png" },
                        { id: 3, title: "商品3", url: "product3.html", image: "product03.png" }
                    ]
                };
            },
            methods: {
                logout() {
                    localStorage.removeItem('isLoggedIn');
                    localStorage.removeItem('username');
                    this.isLoggedIn = false;
                    this.$message.success('已退出登录');
                    window.location.reload();
                },
                goToPersonal() {
                    window.location.href = 'person.html';
                }
            },
            mounted() {
                // 检查登录状态
                if (!this.isLoggedIn && window.location.pathname !== '/login.html') {
                    // 可根据需要添加跳转逻辑
                }
            }
        };

        Vue.createApp(App)
            .use(ElementPlus)
            .mount('#app');
    </script>
</body>
</html>